<template>
    <div class="news-content">
        <h2 class="news-issue">战略微头条 I (NO.07) 2024.08.05-08.11</h2>
        <div class="meta-info">
            <span class="view-count"> 0人阅读</span>
            <span class="time-meta"> --</span>
        </div>
        <div class="news-weekly">
            <span class="diamond">◆</span>
            <span class="diamond main">◆</span>
            <span class="section-title">新闻周报</span>
            <span class="diamond main">◆</span>
            <span class="diamond">◆</span>
        </div>
        <h3 class="news-title">第3条测试新闻：城市建设展现新活力 - 详细标题</h3>
        <div class="news-source">央视网</div>
        <p class="news-summary">这是第3条新闻的摘要内容，简要介绍了新闻的主要内容和核心观点。</p>
        <a href="/preview/lookDetail" class="read-more" >阅读全文</a>
    </div>
</template>
<script></script>
<style>
.news-content {
    padding: 15px;
    height: calc(100% - 80px);
    overflow-y: auto;
}

.news-issue {
    font-size: 16px;
    margin-bottom: 10px;
}

.meta-info {
    display: flex;
    gap: 15px;
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.news-weekly {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
    color: #4285f4;
}

.diamond {
    font-size: 12px;
}

.diamond.main {
    font-size: 16px;
}

.section-title {
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}

.news-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.news-source {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

.news-summary {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.read-more {
    color: #4285f4;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #4285f4;
    padding-bottom: 2px;
}
</style>